<template>
  <view class="settings-container">
    <view class="header">
      <text class="title">账号管理</text>
    </view>

    <view class="settings-list">
      <view class="setting-item">
        <text>当前账号</text>
        <text>user@example.com</text>
      </view>
      <view class="setting-item" @click="navigateToPassword">
        <text>登录密码</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateToPhone">
        <text>绑定手机号</text>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <view class="logout-btn" @click="handleLogout">
      <text>注销账号</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'

const navigateToPassword = () => {
  uni.showModal({
    title: '修改密码',
    content: '',
    confirmText: '更改完成',
    editable: true,
    placeholderText: '请输入新密码',
    success: (res) => {
      if (res.confirm) {
        uni.showModal({
          title: '确认密码',
          content: '',
          editable: true,
          placeholderText: '请再次输入密码',
          success: (confirmRes) => {
            if (confirmRes.confirm && res.content === confirmRes.content) {
              uni.showToast({
                title: '密码修改成功',
                icon: 'success'
              })
              uni.redirectTo({
                url: '/pages/starter/login/login'
              })
            } else {
              uni.showToast({
                title: '两次输入密码不一致',
                icon: 'error'
              })
            }
          }
        })
      }
    }
  })
}

const navigateToPhone = () => {
  uni.navigateTo({
    url: '/pages/person/account/phone'
  })
}

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要注销账号吗？此操作不可恢复',
    success: (res) => {
      if (res.confirm) {
        uni.redirectTo({
          url: '/pages/starter/login/login'
        })
      }
    }
  })
}
</script>

<style>
.settings-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20px;
}

.header {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.settings-list {
  background-color: #fff;
  border-radius: 10px;
  margin-top: 20px;
  overflow: hidden;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.setting-item:last-child {
  border-bottom: none;
}

.logout-btn {
  margin-top: 30px;
  background-color: #fff;
  color: #ff2442;
  text-align: center;
  padding: 15px;
  border-radius: 10px;
  font-weight: 500;
}
</style>
